<template>
  <div v-loading="loading" class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>注册信息</span>
      </div>
      <el-row>
        <el-col :span="8" class="el-form-item">
          <label>注册账号：</label>
          <span>{{ formData.userName }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>真实姓名：</label>
          <span>{{ formData.realName }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>身份证号：</label>
          <span>{{ formData.idCard }}</span>
        </el-col>
      </el-row>

    </el-card>
    <el-card class="box-card">

      <el-row>
        <el-col :span="8" class="el-form-item">
          <label>电子照片</label>
        </el-col>
        <el-col :span="16" class="el-form-item">
          <label>身份证</label>
        </el-col>

        <el-col :span="8" class="el-form-item">
          <el-image
            v-if="formData.photoUrl"
            :src="formData.photoUrl"
            :preview-src-list="[formData.photoUrl]"
            fit="contain"
            lazy
            class="img"
          >
            <!-- <div slot="error">
              <i class="el-icon-document" />
            </div> -->
          </el-image>
        </el-col>

        <el-col :span="16" class="el-form-item" v-if="photoList.length">
          <el-image
            v-for="(item,index) in photoList"
            :key="index"
            :src="item"
            :preview-src-list="photoList"
            fit="contain"
            lazy
            class="img"
          >
            <!-- <div slot="error">
              <i class="el-icon-document" />
            </div> -->
          </el-image>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>其他信息</span>
      </div>
      <el-row>
        <el-col :span="8" class="el-form-item">
          <label>姓名：</label>
          <span>{{ formData.realName }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>联系电话：</label>
          <span>{{ formData.phone }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>性别：</label>
          <span>{{ formData.genderInfo }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="el-form-item">
          <label>年龄段：</label>
          <span>{{ formData.ageTypeInfo }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>所在单位类型：</label>
          <span>{{ formData.panyTypeInfo === '毕业院校' ? '高校' : formData.panyTypeInfo}}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>单位名称：</label>
          <span>{{ formData.panyName }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="el-form-item">
          <label>当前职务：</label>
          <span>{{ formData.position }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>联系邮箱：</label>
          <span>{{ formData.email }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>应急电话：</label>
          <span>{{ formData.emgPhone }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="el-form-item">
          <label>微信：</label>
          <span>{{ formData.wechat }}</span>
        </el-col>
        <el-col :span="8" class="el-form-item">
          <label>地区：</label>
          <span>{{ formData.province }}{{ formData.city }}{{ formData.district }}</span>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { uploadFile } from '@/api/admin.js'
import { getDetail } from '@/api/web/user'
export default {
  components: { Tinymce },
  data() {
    return {
      submitLoading: false,
      loading: false,
      formData: {},
      img_loading: false,
      photoList: [],
      rules: {
        bannerImage: [{
          required: true,
          message: '请上传封面图片'
        }],
        content: [{
          required: true,
          message: '请输入新闻内容'
        }],
        content: [{
          required: true,
          message: '请输入英文版内容'
        }],
        title: [{
          required: true,
          message: '请输入新闻标题'
        }],
        titleEn: [{
          required: true,
          message: '请输入英文标题'
        }]
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.getInfoById()
    }
  },
  methods: {
    remoteMethod() {

    },
    getInfoById() {
      this.loading = true
      getDetail({ userId: this.$route.query.id }).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.formData = {
            // title: res.data.title,
            // authorId: res.data.authorId,
            // bannerImage: res.data.bannerImage,
            // content: res.data.content,
            // describeInfo: res.data.describeInfo,
            // labelId: res.data.labelId.toString(),
            // id: res.data.id
          }
          this.formData = res.data
          this.photoList = []
          if(this.formData.idCardCopyUrl){
            this.photoList.push(this.formData.idCardCopyUrl)
          }
          if (this.formData.idCardCopy2Url) {
            this.photoList.push(this.formData.idCardCopy2Url)
          }
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    addNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          delete this.formData.createDate
          delete this.formData.publishDate
          addNews(this.formData).then(res => {
            this.submitLoading = false
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '提交成功'
              })
              this.$router.push({
                path: '/nft/article'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }
      })
    },
    uploadRequest(params) {
      this.img_loading = true
      uploadFile(params).then(res => {
        this.img_loading = false
        if (res && res.data && res.data.length) {
          this.$set(this.formData, 'cover', res.data[0])
        }
      })
    }
  }
}
</script>

<style scoped>
.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409EFF;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.container {
  padding-bottom: 30px;
}
.box-card label{
  color: #999;
}
.box-card {
  margin-bottom: 20px;
}
.img{
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>
<style>
.demo-ruleForm .el-input,
.demo-ruleForm .el-select {
  width: 300px;
}</style>
